<template>
    <orh-table reload  @on-reload="reload" add="add" @on-add="moralAdd" del="del" @on-del="confirm">
        
        <Table border stripe :columns="columns" @on-selection-change="selectOne" :data="data" :loading="tableload" slot="table"></Table>

        <orh-sidebar v-model="show" :title="titles" scale slot="others">
            <component :is="content" :condition="condition" @requery="requery"></component>
        </orh-sidebar>

        <Modal
            slot="others"
            :title="Title"
            v-model="modal10"
            width="700"
            class-name="vertical-center-modal">
            <p>
                <Table border stripe :columns="columnsm" :data="dataList" :loading="tableloadm"></Table>
            </p>
            <div slot="footer">
                <Button type="primary" size="large" long  @click="modal10=false">取消</Button>
            </div>
        </Modal>

    </orh-table>
</template>
                
<script>

export default {
    name: 'dutymodule-dutyleader',
    components: {
        Operation: resolve => {require(['./Operation.vue'], resolve);},
    },
    data () {
        return {
            modal10:false,
            Title:'',
            tableloadm:false,
            dataList:[],
            columnsm:[
                {
                    title: '星期',
                    minWidth: 150,
                    render: (h, params) => {
                        let ss = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
                        return h('div',ss[params.row.type-1]);
                    }
                },
                {
                    title: '部门',
                    minWidth: 150,
                    render:(h,params)=>{
                        if(params.row.department_info !=null){
                            let name = params.row.department_info.zh?params.row.department_info.zh:params.row.department_info.mn;
                            return h('div',name)
                        }
                        
                    }
                },
                {
                    title: '岗位',
                    minWidth: 150,
                    render:(h,params)=>{
                        if(params.row.position_info !=null){
                            let name = params.row.position_info.zh?params.row.position_info.zh:params.row.position_info.mn;
                            return h('div',name)
                        }
                    }
                },
                {
                    title: '人员',
                    minWidth: 150,
                    render: (h, params) => {
                        let ss = params.row.user_info ? params.row.user_info.name.zh : ''
                        return h('div',ss);
                    }
                },
            ],
            show: false,
            content: null,
            titles: null,
            tableload: true,
            data:[],
            columns:[
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '教学周',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let name= params.row.name?params.row.name:params.row.mn_name;
                        return h('div', name);
                       
                    },
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'look',
                                    }
                                ],
                                props: {
                                    type: 'success',
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.look(params.row)
                                    },
                                },
                            }, '查看'),
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'edit',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.updata(params.row.id)
                                    },
                                },
                            }, '修改'),
                            h('Button', {
                                directives: [
                                    {
                                    name: 'button',
                                    value: 'del',
                                    }
                                ],
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.del = [params.row.id]
                                        this.confirm()
                                    }
                                }
                            }, '删除'),
                        ]);
                    }
                },
            ],
            url: 'api/watchlist/v1/weekcheck/list',
            delUrl: 'api/watchlist/v1/weekcheck/del/',
            del: [],
            condition: null,
        }
    },

    methods: {
        
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        moralAdd () {
            this.condition = false
            this.titles = '添加数据'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 修改数据
         * @param   {index}            当前数据id
         * 
         ************************************************************/
        updata (index) {
            this.condition = index
            this.titles = '修改数据'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 批量删除数据
         * @param   {index}            所选数据id[array]
         * 
         ************************************************************/
        selectOne (index) {
            this.del = index.map(item=> item.id)
        },
        
        /************************************************************
         * 
         * 执行删除操作
         * 
         ************************************************************/
        confirm () {
            this.$Modal.confirm({
                title: '数据删除',
                content: '<p>您确定要删除这些数据吗?</p>',
                onOk: () => {
                    if(this.del.length==0){
                        this.$Message.error('请选择删除项');
                        return
                    }
                    this.del = JSON.stringify(this.del)
                    this.tableload = true 
                    this.$http.delete(`${this.delUrl}${this.del}`)
                    .then(val=>{  
                        this.del=[]
                        this.reload()    
                        this.$Message.success(val.message);           
                    }).catch(err=>{
                        if(err.code && err.code==422) {
                            this.$Message.error(err.message);
                        }
                        this.tableload = false 
                    })
                },
            });
        },
        
        /************************************************************
         * 
         * 查看数据
         * @param   {index}            当前数据id
         * 
         ************************************************************/
        look (row) {
            this.tableloadm = true
            this.Title=row.name
            this.$http.get(`api/watchlist/v1/weekcheck/find/${row.id}`).then(val=>{
                this.dataList = val.data.sort(this.compare('type'))
                this.tableloadm = false
            }).catch(err => {
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableloadm = false
            })
            this.modal10=true
        },
        
        /************************************************************
         * 
         * 添加，修改数据成功后关闭组件并刷新数据
         * @param   {state}            状态
         * 
         ************************************************************/
        requery (state) {
            if(state){
                this.show = false
                this.reload ()
            }
        },
        
        /************************************************************
         * 
         * 刷新数据
         * @param   {index}            分页
         * 
         ************************************************************/
        reload (index) {
            this.data = []
            this.tableload = true
            this.queryData()
        },
        
        /************************************************************
         * 
         * 排序
         * 
         * 
         ************************************************************/
        compare(property){
            return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                return value1 - value2;
            }
        },
        /************************************************************
         * 
         * 列表数据
         * 
         * 
         ************************************************************/
        queryData () {
            this.$http.get(this.url).then(val=>{
                this.data = val.data.sort(this.compare('id'))
                this.tableload = false
            }).catch(err => {
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableload = false
            })
        },
    },
    created () {
        this.reload ()
    },
}
</script>
